<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sysRole</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />

    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>



<div class="container container-fluid" style="margin: 5px auto;"  id="sysRoleApp">

    <!--查询form stat-->
    <div class="row" >

        <form class="form-horizontal">
            <div class="form-group col-sm-4">
                <div class="col-sm-4 control-label">姓名</div>
                <div class="col-sm-8">
                    <input type="text" v-model="sysRoleSearchForm.sname" class="form-control input-sm">
                </div>
            </div>
            <div class="form-group col-sm-4">
                <div class="col-sm-4 control-label">手机号</div>
                <div class="col-sm-8">
                    <input type="text" v-model="sysRoleSearchForm.phone" class="form-control input-sm">
                </div>
            </div>
            <div class="form-group col-sm-4">
                <div class="col-sm-4 control-label">创建日期</div>
                <div class="col-sm-8">
                    <input type="datetime-local" v-model="sysRoleSearchForm.ctime"  class="form-control input-sm">
                </div>
            </div>
            <div class="form-group col-sm-4">
                <div class="col-sm-4 control-label">邮箱地址</div>
                <div class="col-sm-8">
                    <input type="email" v-model="sysRoleSearchForm.email" class="form-control input-sm">
                </div>
            </div>

        </form>
    </div>
    <!--查询form ends-->

    <!--查询button start-->
    <div class="row">

            <div class="col-sm-8">
                <div class="btn-group" role="group">

                    <button class="btn btn-default" type="button" @click="sysRoleAddModal">
                        新增
                    </button>
                    <button class="btn btn-default" type="button">
                        批量导入
                    </button>

                    <button class="btn btn-default" type="button" @click="sysRoleUpdateModal">
                        修改
                    </button>
                    <button class="btn btn-default" type="button">
                        删除
                    </button>
                    <button class="btn btn-primary" type="button">
                        导出
                    </button>
                </div>
            </div>
            <div class="col-sm-4  text-right">
                <div class="btn-group" role="group">

                    <button class="btn btn-success" type="button" @click="doSearch">
                        查询
                    </button>
                    <button class="btn btn-default" type="button" @click="doClear">
                        清空
                    </button>

                </div>
            </div>
    </div>
    <!--查询button ends-->

    <div class="row">


        <!--分页 start-->
        <ul class="pagination  pagination-sm" style="margin-top: 5px; margin-bottom: 5px;">
            <li class="page-item">
                <a class="page-link" href="#"><i @click="switchToPage(1)">&laquo;</i></a>
            </li>
            <li class="page-item">
                <a href="#"  class="page-link"><i  @click="switchToPage(pageNow-1)">&lt;</i></a>
            </li>
            <li class="page-item" v-for="n in totalPages" :class="{active:n == pageNow}">
                <a href="#"  @click="switchToPage(n)" class="page-link">{{n}}</a>
            </li>
            <li class="page-item">
                <a href="#"   class="page-link"><i  @click="switchToPage(pageNow+1)">&gt;</i></a>
            </li>
            <li class="page-item">
                <a href="#"   class="page-link"><i  @click="switchToPage(totalPages)">&raquo;</i></a>
            </li>
        </ul>
        <!--分页 ends-->

        <!--表格数据 start-->
         <table class="table table-hover table-striped table-bordered table-sm" style="margin-top: 5px;">
                    <thead >
                    <tr>
                        <th> <button type="button" class="btn btn-sm" @click="fnChangeAll">全部</button> </th>
                        <th class="col-sm-1">#</th>
                        <th class="col-sm-1">roleName</th>
                        <th class="col-sm-1">scode</th>
                        <th class="col-sm-1">phone</th>
                        <th class="col-sm-2">ctime</th>
                        <th class="col-sm-1">邮箱地址</th>
                        <th class="col-sm-3">说明</th>
                        <th>操作</th>
                        <!--<th>状态<、/th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(user,index) in sysRoleList" @click="fnChangeStatus(index)">
                        <td><input disabled type="checkbox" :value="index" v-model="checkedRows"></td>
                        <td>{{(pageNow-1)*10 + index+1}}</td>
                        <td>{{user.roleName}}</td>
                        <td>{{user.scode}}</td>
                        <td>{{user.phone}}</td>
                        <td>{{user.ctime}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.note}}</td>
                        <td>
                            <button type="button" class="btn btn-sm">修改</button>
                            <button type="button"  class="btn btn-sm btn-danger">删除</button>
                        </td>
                        <!--<td v-if="user.disenable == 0">正常</td>-->
                        <!--<td v-else>注销</td>-->
                    </tr>
                    </tbody>
                </table>
        <!--表格数据 ends-->



    </div>



    <!--add modal start-->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="sysRoleAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">操作</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label">sname</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" v-model="sysRoleDataForm.sname">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label">scode</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" v-model="sysRoleDataForm.scode">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label">phone</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" v-model="sysRoleDataForm.phone" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label">email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" v-model="sysRoleDataForm.email" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-3 control-label">说明</label>
                            <div class="col-sm-9">
                                <textarea rows="5" class="form-control" v-model="sysRoleDataForm.note"></textarea>
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                            <!--<div class="col-sm-offset-2 col-sm-10">-->
                                <!--<div class="checkbox">-->
                                    <!--<label>-->
                                        <!--<input type="checkbox">请记住我-->
                                    <!--</label>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<div class="col-sm-offset-2 col-sm-10">-->
                                <!--<button type="submit" class="btn btn-default">登录</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="sysRoleAddOrUpdate">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!--add modal ends-->

</div>
</body>
</html>


<script>

    var vm = new Vue({
        el: '#sysRoleApp',
        data: {
            sysRoleSearchForm:{},
            sysRoleDataForm:{},
            sysRoleList:[],
            perPage:10,
            pageNow:1,
            totalPages:5,
            checkedRows:[],
            updateFlag:false,


        },
        methods: {

            fnChangeAll: function () {


                var length = this.checkedRows.length;
                if(length>0){
                    this.checkedRows = [];
                }else{

                    var size=this.sysRoleList.length;
                    for(var i=0;i<size;i++){

                        this.checkedRows.push(i);
                    }
                }
            },

            fnChangeStatus:function (indx) {

//                this.checkedRows.sort();
                var number = this.checkedRows.indexOf(indx);
                if(number> -1){

                    this.checkedRows.splice(number, 1);

                }else{

                    this.checkedRows.push(indx);
                }
            },
            doSearch:function () {
                this.switchToPage(1);
            },
            doClear:function () {
                this.sysRoleSearchForm={};
                this.switchToPage(1);
            },


            sysRoleAddOrUpdate:function () {

                if(this.updateFlag){


                    this.sysRoleUpdate();
                }else{

                    this.sysRoleAdd();
                }

            },
            //
            sysRoleAddModal:function () {

                this.updateFlag = false;
                $('#sysRoleAddModal').modal('show');
            },
            sysRoleUpdateModal:function () {

                this.updateFlag = true;
                var size = this.checkedRows.length;
                if(size != 1){
                    alert('请选择一行数据');
                    return ;
                }

                var indx=this.checkedRows[0];
                var item = Object.assign({}, this.sysRoleList[indx]);

                this.sysRoleDataForm = item;
                $('#sysRoleAddModal').modal('show');
            },

            sysRoleAdd:function () {

                var _self = this;

                $.ajax({
                    url:'/sysRole/add',
                    data: JSON.stringify(_self.sysRoleDataForm),
                    type: "POST",
                    datType: "JSON",
                    contentType: "application/json"

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

                            alert('ok');
                            _self.switchToPage(1);

                        }else{

                            alert(dat.msg);
                        }
                    }
                );

            },
            sysRoleUpdate:function () {

                var _self = this;

                $.ajax({
                    url:'/sysRole/update',
                    data: JSON.stringify(_self.sysRoleDataForm),
                    type: "POST",
                    datType: "JSON",
                    contentType: "application/json"

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

                            alert('ok');
                            _self.switchToPage(1);

                        }else{

                            alert(dat.msg);
                        }
                    }
                );

            },

            switchToPage:function (pageNum) {

                this.checkedRows=[];
//                console.log(null, pageNum);
               if( pageNum >= this.totalPages){
                   pageNum = this.totalPages;
               }
               if(pageNum <= 0 ){
                   pageNum = 1;
               }

               this.pageNow = pageNum;
               this.getDataList(pageNum);

            },


            getDataList: function (page) {

                var _self = this;

                $.ajax({
                    url:'/sysRole/pageInfo?current='+page +'&size='+10,
                    data: _self.sysRoleSearchForm,

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

                            var data = dat.data;
                            var dataList=data.records;
//                            _self.sysRoleList=data.records;
                            _self.sysRoleList=[];
                            for(var i in dataList){

                                _self.sysRoleList.push(dataList[i]);
                            }
                            _self.totalPages= Math.ceil(data.total/data.size);

                        }
                    }
                );
            }
        },
        mounted: function () {

            this.switchToPage(1);
        }
    });

</script>